<template>
  <div>
    <div class="vuex-title">
      <h3>Vuex知识总结</h3>
    </div>
    <div class="vuex-knowledage">
      <h4>1.state</h4>
      <span>state是存储的单一状态树，每一个应用仅包含一个store实例.我们在使用的时候是将我们需要做状态管理的量放到这里面去,然后在需要用的时候再去使用它</span>
      <span>具体代码链接:<a @click="useState">使用state获取到的初始值</a></span>
      <h4>2.Mutations(同步)</h4>
      <span>提交mutations是更改vuex的store的状态的唯一方法</span>
      <span>具体的代码链接:<a @click="useMutations">提交mutations</a></span>
      <h4>3.Actions(异步)</h4>
      <span>Actions像是一个装饰器,提交mutation,而不是直接改变状态(Actions可以包含任何异步操作),是state的加强版</span>
      <span>具体的代码链接:<a @click="useActions">使用Actions</a></span>
      <h4>4.Module</h4>
      <span>Module是store的分割,在遇到中大型项目的时候,我们可以使用它将每个模块的store分开管理,这样每个模块都会有自己的state、getter、mutations、actions。</span>
       <span>具体的代码链接:<a @click="useModeule">使用Actions</a></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueKnowledage",
  methods:{
    useState() {
      this.$router.push('vuex-state');
    },
    useMutations() {
      this.$router.push('vuex-mutations');
    },
    useActions() {
      this.$router.push('vuex-actions');
    },
    useModeule() {
      this.$router.push('vuex-module');
    }
  }
};
</script>

<style scoped>
.vuex-title {
  text-align: center;
}

.vuex-knowledage h4 {
  padding: 20px 10px;
}

.vuex-knowledage span {
  padding: 0px 40px;
}
</style>
